<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海洋可视化系统</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,
    initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><!--视图约束-->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4401444_0iroxi3zb5am.css">
    <style>
      body,ul,li,a{
        margin:0px;
        padding:0px;
        list-style:none;
        text-decoration:none;
      }
      body{
        background:#f4f4f4;
      }
      /*头部样式*/
      header{
        width:100%;
        height:60px;
        background:#fff;
        margin-bottom:20px;
        box-shadow:0px 0px 5px 5px #ccc;
      }
      .top{
        height:60px;
        width:60%;
        margin:0 auto;
        border:1px solid green;/**/
        display:flex;
        justify-content:space-between;
      }
      .top>section{
        border:1px solid blue;/**/
      }
      .top_left{
        flex-grow:1;
        display:flex;
        align-items:center;
      }
      .top_left>img{
        height:50px;
      }
      .top_center{
        flex-grow:9;/*原5*/
      }
      .top_center>ul,.top_right>ul{
        height:60px;
        display:flex;
        justify-content:space-around;/*space-between*/
        align-items:center;
      }
      .top_center>ul>li>a,.top_right>ul>li>a{
        font-size:14px;
        color:rgba(31,45,61,0.5);
        font-weight:bold;
      }
      .top_right{
        flex-grow:3;/*原2*/
      }
      .top_right>ul{
        justify-content:space-around;
      }
      .top_center>ul>li:first-child{
        position:relative;
      }
      .top_center>ul>li:first-child>div{
        /*border:1px solid red;*/
        padding:10px 0px;
        position:absolute;
        padding-left:15px;/**/
        width:180px;
        background:#fff;
        top:25px;
        left:-10px;
        display:none;
      }
      .top_center>ul>li:first-child:hover>div{
        display:block;
      }
      .top_center>ul>li:first-child>div>ul>li>a{
        /*border:1px solid red;*/
        display:flex;
        /*justify-content:space-between;*/
        align-items:center;
        /*padding:0px 10px;*/
      }
      .top_center>ul>li:first-child>div>ul>li{
        /*border:1px solid red;*/
        margin-top:5px;
      }
      .top_center>ul>li:first-child>div>ul>li>a>img{
        height:40px;
      }
      .top_center>ul>li:first-child>div>ul>li>a>span{
        color:#8492A6;
        font-size:12px;
        font-weight:bold;
        /*border:1px solid red;*/
        margin-left:15px;
      }

      content{
        width:100%;
        height:600px;
        border:1px solid black;
        display:flex;/**/
        /*justify-content:space-between;*/
        background:darkblue;
      }

      .content-left{
        /*height:600px;
        float:left;
        width:30%;*/
        border:1px solid red;
        flex-grow:3;
        display:flex;
        flex-direction:column;
      }
      .content-left1{
        /*height:600px;*/
        border:1px solid white;
        flex-grow:1;
      }
      .content-left2{
        /*height:600px;*/
        border:1px solid red;
        flex-grow:1;
      }
      .content-left3{
        /*height:600px;*/
        border:1px solid red;
        flex-grow:1;
      }

      .content-center{
        /*float:left;
        width:40%;
        height:600px;*/
        border:1px solid green;
        flex-grow:4;
      }

      .content-right{
        /*height:600px;
        float:left;
        width:30%;*/
        border:1px solid red;
        flex-grow:3;
        display:flex;
        flex-direction:column;
      }
      .content-right1{
        /*height:600px;*/
        border:1px solid red;
        flex-grow:1;
      }
      .content-right2{
        /*height:600px;*/
        border:1px solid red;
        flex-grow:1;
      }
      .content-right3{
        /*height:600px;*/
        border:1px solid red;
        flex-grow:1;
      }

      .pad{
        display:none;
      }
      /*pc端*/
      @media screen and (min-width:960px){
        .top{
          min-width:960px;
        }

      }
      /*pad端*/
      @media screen and (max-width:960px) and (min-width:750px){
        /*.top{
          min-width:750px;
        }原用于对齐，但可能由于浏览器不同而不需要*/
        .top_center,.top_right{
          display:none;
        }
        .pad{
          display:block;
          /*border:1px solid red;*/
          line-height:60px;
          color:#8492a6;
        }
        .pad>div{
          width:100%;
          height:300px;
          background:#fff;
          position:absolute;
          left:0px;
          z-index:1;
          display:none;
        }
        .pad:hover>div{
          display:block;
        }
        .pad>div>section{
          width:60%;/**/
          border:1px solid red;
          margin:0 auto;
        }

      }
      /*手机端*/
      @media screen and (max-width:750px){
        .top{
          min-width:200px;
        }/**/
        .top_center,.top_right{
          display:none;
        }
        .pad{
          display:block;
          /*border:1px solid red;*/
          line-height:60px;
          color:#8492a6;
        }
        .pad>div{
          width:100%;
          height:300px;
          background:#fff;
          position:absolute;
          left:0px;
          z-index:1;
          display:none;
        }
        .pad:hover>div{
          display:block;
        }
        .pad>div>section{
          width:60%;/**/
          border:1px solid red;
          margin:0 auto;
        }

      }
    </style>
</head>
<body>
  <header>
      <section class="top">
      <section class="top_left"><img src="../static/img/sea.png" alt=""></section>
      <section class="top_center">
        <ul>
          <li>
            <a href="">更多信息<i class="icon-jiantouxia iconfont"></i></a>
            <div>
              <ul>
                <li>
                  <a href=""><img src="../static/images/.jpg" alt=""><span>全球</span></a>
                </li>
                <li>
                  <a href=""><img src="../static/images/.jpg" alt=""><span>温室效应</span></a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="">介绍</a></li>
          <li><a href="">文章</a></li>
          <li><a href="https://www.supermapol.com/apps/mapdashboard/v2/index.html?id=1565366625">气象图</a></li>
          <li><a href="">天气预报</a></li>
          <li><a href="">帮助</a></li>
        </ul>
      </section>
      <section class="top_right">
        <ul>
          <li><a href="">注册</a></li>
          <li><a href="">登录</a></li>
          <li><a href="">退出</a></li>
        </ul>
      </section>
      <section class="pad icon-daohang iconfont">
        <div>
          <section>
            <ul>
              <li><a href="">更多信息</a></li>
              <li><a href="">天气预报</a></li>
              <li><a href="">帮助</a></li>
            </ul>
          </section>
        </div>
      </section>
    </section>
  </header>
  <content>
      <section class="content-left">
<!--          id="content-left1"-->
          <div class="content-left1" id="content-left1">1</div>
          <div class="content-left2">2</div>
<!--          <div class="content-left3">3</div>-->
      </section>
      <section class="content-center">content-center</section>
      <section class="content-right">
          <div class="content-right1">1</div>
          <div class="content-right2">2</div>
          <div class="content-right3">3</div>
      </section>
  </content>

  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
  <script src="../static/js/content-left1.js"></script>
  <script src="../static/js/sea.js"></script>
</body>
</html>